<template>
    <view class="goods-item border-bottom bg-ff">
        <view class="info flex-row jc-between size-24 m-botoom-20" @click="toDetail(goodsItem.id)">
            <image :src="goodsItem.imageUrl" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;" mode="">
            </image>
            <view class="content flex-2 p-left-20 line-height-40 flex-colum jc-between">
                <view class="color-3 size-28">{{goodsItem.name}}</view>
                <view class="omit-2 color-6">作用：{{goodsItem.goods_value}}</view>
                <view class=" flex-row jc-between ai-center m-top-10">
                    <view class="prcie ">
                        <text class="font-bold size-28" v-if="goodsItem.dis_price"> ￥{{goodsItem.dis_price}}</text>
                        <text style="margin:  0 6rpx;color: #666;" class="color-3 size-26 "
                            v-if="goodsItem.dis_price&&goodsItem.price">/</text>
                        <text class="color-6 size-26" style="text-decoration: line-through;"
                            v-if="goodsItem.price">￥{{goodsItem.price}}</text>
                    </view>
                    <view v-if="showQuantity" class="number-box flex-row ai-center"
                        :style="{'background': goodsItem.num>0? '#f5f5f5' : ''}">
                        <view class="min rollIn" @tap.stop="minusCart($event)" style="line-height: 0;"
                            v-if="goodsItem.num>0">
                            <u-icon name="minus-circle-fill" color="#4356ff" />
                        </view>
                        <input class="input text-center " v-if="goodsItem.num>0" type="text" v-model="goodsItem.num"
                            @tap.stop="changeValue" disabled />
                        <view class="" @tap.stop="addCart($event)" style="line-height: 0;">
                            <u-icon name="plus-circle-fill" color="#4356ff" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="">
            <u-tag v-for="(tagItem,tagIndex) in newTags" :key="tagIndex" class="tag" :text="tagItem.name|formatGoodsTag"
                mode="plain" :type="tagColor" @click="$f.jumpUrl('/pages/article/detail?id='+tagItem.id+'&&title='+tagItem.name)" />
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            goodsItem: {
                type: Object,
            },
            showQuantity: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            newTags() {
                if (this.goodsItem.tags.length > 4) {
                    let arr = this.goodsItem.tags.splice(0, 4)
                    this.goodsItem.tags=arr
                    return  this.goodsItem.tags
                } else {
                    return this.goodsItem.tags
                }
            },
            tagColor() {
                var num = Math.floor(Math.random() * 10) / 2;
                if (num > 4) {
                    return 'success'
                } else if (num > 2.5) {
                    return 'info '
                } else if (num > 1.5) {
                    return 'warning'
                } else {
                    return 'error'
                }
            },
        },
        data() {
            return {}
        },
        methods: {
            addCart() {
                this.goodsItem.num++
            },
            minusCart() {
                this.goodsItem.num--
            },
            toDetail(id) {
                console.log(1)
                uni.navigateTo({
                    url: '/pagesGoods/goods/detail?id=' + id
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goods-item {
        padding: 20rpx 40rpx;

        .content {
            .prcie {
                color: #F82727;

            }

        }

        .tag {
            margin: 4px;
        }
    }

    .number-box {
        font-size: 50rpx;
        display: flex;
        width: 150rpx;
        justify-content: flex-end;
        border-radius: 20px;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;

        .min {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        input {
            font-size: 26rpx;
        }
    }

    .rollIn {
        -webkit-animation-name: rollIn;
        animation-name: rollIn;
    }

    @-webkit-keyframes rollIn {
        0% {
            opacity: 0;

            -webkit-transform: translateX(100%) rotate(120deg);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0px) rotate(0deg);
        }
    }
</style>
